<template>
  <div style="position: relative; height: 100%; background: #fff">
    <img
      src="@/designer/assets/images/view2.png"
      style="width: 100%; height: 100%; display: block"
    />
    <!-- <q-input v-bind="$attrs" v-on="$listeners"></q-input> -->
    <!-- <div id="myChart" style="width: 100%; height: 100%"></div> -->
  </div>
</template>

<script>
export default {
  name: 'View2',
};
</script>

<script setup>
import * as echarts from 'echarts';
import { EventBus } from './../event-bus';

defineProps({
  title: {
    type: String,
    default: '',
  },
});
const save = () => {
  alert('联动事件触发了');
};
const myChart = ref(null);
const echartInit = () => {
  // let hasChartDom = echarts.getInstanceByDom(
  //   document.getElementById('myChart')
  // );
  // if (!hasChartDom) {
  myChart.value = echarts.init(document.getElementById('myChart'));
  // }
  // 绘制图表
  myChart.value.setOption({
    title: {
      text: 'ECharts 入门示例',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
};
// echartInit();
onMounted(() => {
  EventBus.$on('handleClick', save);
});
onUnmounted(() => {
  EventBus.$off('handleClick', save);
});
</script>
